<template>
  <div>
    <a-form :form="form">
      <div class="short-back" @click="handlePrev">
        <a-icon type="arrow-left" :style="{ fontSize: '18px', color: '#008FFF' }" />
        <span class="back-tip">返回</span>
      </div>
      <a-form-item>
        <a-input
          placeholder="新密码"
          autocomplete="new-password"
          type="password"
          ref="password"
          v-decorator="['password', { rules: [{ required: true, validator: validatePwdPower }] }]"
        >
        </a-input>
      </a-form-item>
      <a-form-item>
        <a-input
          placeholder="确认密码"
          autocomplete="new-password"
          type="password"
          ref="confirmPassword"
          v-decorator="['confirmPassword', { rules: [{ required: true, validator: validateConfirmPwd }] }]"
        >
        </a-input>
      </a-form-item>
      <a-form-item style="margin: 44px 0 12px;">
        <a-row :gutter="24">
          <a-col :span="24">
            <a-button type="primary" style="width: 100%;fontSize:14px" @click="handleSave" :loading="isSave"
              >提交</a-button
            >
          </a-col>
        </a-row>
      </a-form-item>
    </a-form>
  </div>
</template>

<script>
import { validatePwdPower, validateConfirmPwd } from '@/utils/validate'
import { randomString } from '@/utils/util'
import { firstChangePassword } from '@/api/user'
import md5 from 'md5'
export default {
  name: 'EditPsw',
  props: {
    params: {
      type: Object,
      default: undefined
    }
  },
  data () {
    return {
      isSave: false,
      form: this.$form.createForm(this)
    }
  },

  beforeCreate () {
    // this.form = this.$form.createForm(this)
  },

  methods: {
    handleSave () {
      this.form.validateFields(async (err, values) => {
        if (!err) {
          this.isSave = true
          /**
           * 拿到值了 可以传接口了。liyi
           */
          let params = {
            'newPassword': randomString(3) + md5(values.password) + randomString(3),
            'oldPassword': this.params.password,
            'source': 100,
            'userNo': this.params.userNo
          }
          let res = await firstChangePassword(params)
          if (res.code === 0) {
            this.$message.success('密码修改成功，请您重新登录')
            this.$emit('ok')
            this.handlePrev()
          } else {
            this.$message.warning(res.msg)
          }
        }
      })
    },

    handlePrev () {
      this.$emit('stepChange', 1, this.params)
    },

    validatePwdPower,
    validateConfirmPwd
  }
}
</script>
<style lang="less" scoped>
.short-back {
  position: absolute;
  top: 10px;
  left: 20px;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
  .back-tip {
    color: #333333;
    font-weight: 500;
    margin-left: 4px;
    font-size: 14px;
  }
}
</style>
